<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线视频播放</title>

<style type="text/css">
	.find{
		float: right;
	}
	.breadcrumb > li + .find::before {
		content: "";
		padding: 0px;
	}
	.breadcrumb > li{
		line-height: 34px;
	}
	.breadcrumb{
		height: 50px;
	}
	.find .input-group-addon{
		cursor: pointer;
	}
	nav{
		text-align: center;
	}
    .ellipsis {
      position: relative;
      width: 100% ;
      max-height: 3em;
      height: 3em;
      line-height: 1.5;
      overflow: hidden;
    }
    .ellipsis::before {
      content: '...';
      position: absolute;
      z-index: 1;
      bottom: 0;
      right: 0;
      width: 1.5em;
      padding-left: 3px;
      box-sizing: border-box;
      background-color: white;
    }
    .ellipsis::after {
      content: '';
      display: inline-block;
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      background-color: white;
    }
</style>
<script type="text/javascript" src="static/player/js/jquery.video-ui.js"></script>
</head>
<body>
<ol class="breadcrumb">
	<li><a><span class="glyphicon glyphicon-home"></span> 当前位置：</a></li>
  	<li><a href="#">资源管理</a></li>
  	<li class="active">视频</li>
  	<li class="find col-md-3 col-lg-3 col-sm-4 col-xs-6">
  		<div class="input-group">
		  	<input type="text" class="form-control" id="videoSearch" name="search" onchange="searchChange()" th:value="${param.search}"  placeholder="搜索">
		  	<span class="input-group-addon" onclick="searchChange()"><span class="glyphicon glyphicon-search"></span>搜索</span>
		</div>
  	</li>
</ol>

<div class="row" id="thumDiv">
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
		<div class="thumbnail" style="height: 350px;">
		<img style="height: 60%;" alt="缩略图"  src="sysFile/download3?fileUuid=5a1d6062-b33c-41b5-bee4-9bf09e73670a"/>
		<div class="caption" style="text-align: center;">
			<h4>abcd</h4>
			<p style="height:2em;padding-bottom: 2.5em;">deeeeesdfsdfsdf</p>
			<p><a class="btn btn-primary" href="#">下载</a></p>
		</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	var pageable={
		page:0,
		size:12,
		pageSum:10,
		search:'',
		sort:'updateTime,desc'
	};
	$(function(){
		pageable.search=$('#videoSearch').val();
		$.post('sysFile/videoPage',pageable,function(data){
			pageable.page=data.number;
			//showThumbnails(data.content);
			//$('#demo1').videoUI({autoHide:false}); 

			if(data.totalPages>0){
				setPage(data.number+1, data.totalPages, refreshThuDiv);
			}
		});
	}); 
	
	function refreshThuDiv(){
		pageable.search=$('#videoSearch').val();
		$.post('sysFile/videoPage',pageable,function(data){
			pageable.page=data.number;
			showThumbnails(data.content);
		});	
	}
	
	function showThumbnails(list){
		var thumDiv=$('#thumDiv');
		thumDiv.empty();
		for(var i=0;i<list.length;i++){
			thumbnail=list[i];
			var div1=$('<div class=".col-xs-12 col-sm-6 col-md-4 col-lg-3"/>');
			var div2=$('<div class="thumbnail" style="height: 350px;"/>');
			//div2.append($('<img style="height: 60%;" alt="缩略图"/>').attr('src','sysFile/download3?fileUuid='+thumbnail.fileUuid));
			var video=$('<video width="370" height="214"/>').attr('src','static/video/'+thumbnail.fileUuid);
			//video.append($('<'))
			div2.append(video);
			var div3=$('<div class="caption" style="text-align: center;"/>');
			div3.append($('<h4/>').html(thumbnail.fileTitle));
			div3.append($('<p class="ellipsis"/>').html(thumbnail.fileRemark));
			div3.append($('<p/>').append($('<a class="btn btn-primary"/>').attr('href','sysFile/download2?fileUuid='+thumbnail.fileUuid).html('下载')));
			div2.append(div3);
			div1.append(div2);
			thumDiv.append(div1);
			video.videoUI();
		}
		
		
	}
	
	/**
    *
    * @param pageCurrent 当前所在页
    * @param pageSum 总页数
    * @param callback 调用ajax
    */
   function setPage(pageCurrent, pageSum, callback) {
       $(".pagination").bootstrapPaginator({
           //设置版本号
           bootstrapMajorVersion: 3,
           // 显示第几页
           currentPage: pageCurrent,
           // 总页数
           totalPages: pageSum,
           //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
           onPageClicked: function (event,originalEvent,type,page) {
               // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
               pageable.page = page-1;
               callback && callback()
           }
       })
   }
	
   function searchChange(){
	   var search=$('#videoSearch').val();
	   var src='sysFile/videoList';
	   $("#box").load(src,{search:search});
   }
</script>
<!-- <script src="static/html5-custom-video-player/dist/js/ckin.js"></script> -->

</body>
</html>